<template>
  <div class="dashboard">
    <!-- 统计卡片区域 -->
    <div class="stat-cards">
      <el-row :gutter="20">
        <el-col
          :xs="24"
          :sm="12"
          :md="12"
          :lg="6"
          v-for="card in statCards"
          :key="card.title"
        >
          <el-card shadow="hover" :body-style="{ padding: '20px' }">
            <div class="stat-card" :class="card.type">
              <div class="icon-wrapper">
                <el-icon :size="40">
                  <component :is="card.icon" />
                </el-icon>
              </div>
              <div class="content">
                <div class="title">{{ card.title }}</div>
                <div class="value">{{ card.value }}</div>
                <div class="compare">
                  较上周
                  <span :class="{ up: card.trend > 0, down: card.trend < 0 }">
                    {{ Math.abs(card.trend) }}%
                    <el-icon>
                      <component
                        :is="card.trend > 0 ? 'ArrowUp' : 'ArrowDown'"
                      />
                    </el-icon>
                  </span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 图表区域 -->
    <div class="charts">
      <el-row :gutter="20">
        <!-- 折线图 -->
        <el-col :xs="24" :lg="16">
          <el-card shadow="hover" class="chart-card">
            <template #header>
              <div class="card-header">
                <span>访问趋势</span>
                <el-radio-group v-model="timeRange" size="small">
                  <el-radio-button value="week">本周</el-radio-button>
                  <el-radio-button value="month">本月</el-radio-button>
                  <el-radio-button value="year">全年</el-radio-button>
                </el-radio-group>
              </div>
            </template>
            <div ref="lineChartRef" class="chart"></div>
          </el-card>
        </el-col>

        <!-- 饼图 -->
        <el-col :xs="24" :lg="8">
          <el-card shadow="hover" class="chart-card">
            <template #header>
              <div class="card-header">
                <span>用户分布</span>
              </div>
            </template>
            <div ref="pieChartRef" class="chart"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 表格区域 -->
    <el-card shadow="hover" class="table-card">
      <template #header>
        <div class="card-header">
          <span>最近活动</span>
          <el-button type="primary" link>查看更多</el-button>
        </div>
      </template>
      <el-table
        :data="activities"
        style="width: 100%"
        :max-height="tableHeight"
      >
        <el-table-column prop="time" label="时间" width="180" />
        <el-table-column prop="user" label="用户" width="180" />
        <el-table-column prop="action" label="操作" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'success' ? 'success' : 'danger'">
              {{ row.status === "success" ? "成功" : "失败" }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import {
  User,
  Goods,
  ShoppingCart,
  Money,
  ArrowUp,
  ArrowDown,
} from "@element-plus/icons-vue";
import * as echarts from "echarts";

// 统计卡片数据
const statCards = [
  {
    title: "总用户数",
    value: "12,345",
    icon: "User",
    trend: 12.5,
    type: "primary",
  },
  {
    title: "商品数量",
    value: "1,234",
    icon: "Goods",
    trend: -5.2,
    type: "success",
  },
  {
    title: "订单数量",
    value: "3,456",
    icon: "ShoppingCart",
    trend: 8.4,
    type: "warning",
  },
  {
    title: "总收入",
    value: "¥123,456",
    icon: "Money",
    trend: 15.7,
    type: "danger",
  },
];

// 时间范围
const timeRange = ref("week");

// 图表实例
let lineChart: echarts.ECharts | null = null;
let pieChart: echarts.ECharts | null = null;
const lineChartRef = ref<HTMLElement>();
const pieChartRef = ref<HTMLElement>();

// 初始化折线图
const initLineChart = () => {
  if (!lineChartRef.value) return;
  lineChart = echarts.init(lineChartRef.value);

  const option = {
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "访问量",
        type: "line",
        smooth: true,
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        areaStyle: {
          opacity: 0.1,
        },
        lineStyle: {
          width: 3,
        },
      },
    ],
  };

  lineChart.setOption(option);
};

// 初始化饼图
const initPieChart = () => {
  if (!pieChartRef.value) return;
  pieChart = echarts.init(pieChartRef.value);

  const option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "用户分布",
        type: "pie",
        radius: "70%",
        center: ["50%", "50%"],
        data: [
          { value: 1048, name: "华东" },
          { value: 735, name: "华北" },
          { value: 580, name: "华南" },
          { value: 484, name: "西北" },
          { value: 300, name: "西南" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  pieChart.setOption(option);
};

// 活动列表数据
const activities = [
  {
    time: "2023-12-01 10:00:00",
    user: "张三",
    action: "登录系统",
    status: "success",
  },
  {
    time: "2023-12-01 09:30:00",
    user: "李四",
    action: "修改用户信息",
    status: "success",
  },
  {
    time: "2023-12-01 09:00:00",
    user: "王五",
    action: "删除文件",
    status: "fail",
  },
];

// 表格高度
const tableHeight = ref(300);

// 计算表格高度
const calculateTableHeight = () => {
  const windowHeight = window.innerHeight;
  const otherHeight = 500; // 预估其他元素的总高度
  tableHeight.value = windowHeight - otherHeight;
};

// 窗口大小改变时重新计算尺寸
const handleResize = () => {
  if (lineChart) {
    lineChart.resize();
  }
  if (pieChart) {
    pieChart.resize();
  }
  calculateTableHeight();
};

onMounted(() => {
  initLineChart();
  initPieChart();
  calculateTableHeight();
  window.addEventListener("resize", handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
  if (lineChart) {
    lineChart.dispose();
  }
  if (pieChart) {
    pieChart.dispose();
  }
});
</script>

<style lang="scss" scoped>
.dashboard {
  .stat-cards {
    margin-bottom: 20px;

    .stat-card {
      display: flex;
      align-items: center;

      .icon-wrapper {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        transition: transform 0.3s;

        &:hover {
          transform: scale(1.1);
        }
      }

      .content {
        flex: 1;

        .title {
          font-size: 14px;
          color: #909399;
          margin-bottom: 8px;
        }

        .value {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 8px;
        }

        .compare {
          font-size: 12px;
          color: #909399;

          .up {
            color: #67c23a;
          }

          .down {
            color: #f56c6c;
          }
        }
      }

      &.primary .icon-wrapper {
        background-color: rgba(64, 158, 255, 0.1);
        color: #409eff;
      }

      &.success .icon-wrapper {
        background-color: rgba(103, 194, 58, 0.1);
        color: #67c23a;
      }

      &.warning .icon-wrapper {
        background-color: rgba(230, 162, 60, 0.1);
        color: #e6a23c;
      }

      &.danger .icon-wrapper {
        background-color: rgba(245, 108, 108, 0.1);
        color: #f56c6c;
      }
    }
  }

  .charts {
    margin-bottom: 20px;

    .chart-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .chart {
        height: 350px;
      }
    }
  }

  .table-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}

// 响应式布局
@media screen and (max-width: 768px) {
  .dashboard {
    .stat-cards {
      :deep(.el-col) {
        margin-bottom: 20px;
      }
    }

    .charts {
      :deep(.el-col) {
        margin-bottom: 20px;
      }
    }
  }
}
</style>
